<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="app" style="padding-bottom: 200px">
    <h3>带label的输入框</h3>
    <label style="display: inline-block; width: 100px">用户名：</label><input type="text"><br>
    <label style="display: inline-block; width: 100px">密码：</label><input>
    <myinput label="用户名" label-width="150px"></myinput>
    <myinput label="密码" prompt="请输入密码"></myinput>

    <h3>自动生成选项的下拉框</h3>
    <select>
        <option>初中</option>
        <option>高中</option>
        <option>专科</option>
        <option>本科</option>
    </select>

    <myselect :items="eduItems" label="学历" ref="mySlt"
        v-on:reset-color="resetColor"></myselect>

    <input v-model="color">
    <button @click="setColor">设置背景色</button>


</div>

<script>
    //注册组件
    Vue.component("myinput",{
        template :`
        <div style="padding: 5px">
            <label style="display: inline-block;"
            :style="{width: this.labelWidth || '100px'}">
            {{label}} :
            </label>
            <input :placeholder="placeholder">
        </div>`,
    })

    Vue.component("myselect",{

        //定义组件属性，定义同样不能用驼峰命名法，使用时，Vue会转成驼峰命名
        //Vue组件属性，是只读的
        //props:["label","label-width","prompt"],
        //数组模型
        props:{
            items:Array,
            label:String
        },
        data (){
            return{
                bgcolor:'#eee'
            }
        },
        template: `
        <div :style="{backgroundColor : bgcolor}">
            <label>{{label || "下拉列表"}}:</label>
            <select>
                <option v-for="item,i in items">
                {{i}} - {{item}}
                </option>
            </select>
            <button @click="setParentColor">设置父对象的 color 值</button>
            </div>
        `,
        methods :{
            setParentColor(){
                this.$emit("reset-color",'#eee',1,2);
            },
        }
    })

    var v = new Vue({
        el:"#app",
        data:{
            eduItems : ["初中","高中","专科","本科"],
            color:'#ddd'
        },
        methods :{
            setColor(){
                //vue的内置对象 ， 以$开头
                var mySlt = this.$refs.mySlt;  //引用组件元素
                //访问组件内部属性
                mySlt.bgcolor = this.color;
            },
            resetColor(color,num1,num2){
                console.info(num1,num2);
                this.color = color;
            }
        }
    })

</script>

</body>
</html>